// 借阅趋势柱状图

(function () {
    var myChart = echarts.init(document.querySelector('.borrowingBar'))
    option = {
        xAxis: {
            type: 'category',
            data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
            axisTick: {
                show: false // 这里设置为false即可去掉刻度线
            },
            axisLabel: {
                interval: 0, // 显示所有标签
                fontSize: 6,
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', // 设置x轴线的颜色为红色
                    width: 0.1
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true, // 显示Y轴线
                lineStyle: {
                    color: '#fff', // 设置x轴线的颜色为红色
                    width: 0.1
                }
            },
            splitLine: {
                show: false // 不显示 Y 轴分割线
            },
            axisLabel: {
                fontSize: 6 // 设置 Y 轴字体大小为16
            }
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: 3,// 设置柱子宽度为10,
                itemStyle: {
                    // 设置柱子的颜色
                    color: '#02d7b1'
                },

            },
            {
                data: [80, 160, 110, 40, 30, 70, 90, 80, 160, 110, 40, 30, 70, 90],
                type: 'bar',
                barWidth: 3, // 设置柱子宽度为10
                itemStyle: {
                    // 设置柱子的颜色
                    color: '#f4c311'
                }
            }
        ]
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();


// 流通占比饼图
(function () {
    var myChart = echarts.init(document.querySelector('.CirculationProportionBoxBie'))
    option = {
        series: [
            {
                type: 'pie',
                radius: [20, 35],
                center: ['center', 'center'],
                data: [



                    {
                        value: 25, name: '归还 25%', labelLine: {
                            show: true,
                            length: 10, // 引导线的长度
                            length2: 10, // 引导线的末端长度
                            lineStyle: {
                                width: 1 // 引导线的宽度
                            }
                        },
                        itemStyle: { color: '#26ffcb' }
                    },
                    {
                        value: 25, name: '借阅 25%', labelLine: {
                            show: true,
                            length: 10, // 引导线的长度
                            length2: 10, // 引导线的末端长度
                            lineStyle: {
                                width: 1 // 引导线的宽度
                            }
                        },
                        itemStyle: { color: '#2651ff' }
                    },
                    {
                        value: 25, name: '逾期 25%', labelLine: {
                            show: true,
                            length: 10, // 引导线的长度
                            length2: 10, // 引导线的末端长度
                            lineStyle: {
                                width: 1 // 引导线的宽度
                            }
                        },
                        itemStyle: { color: '#35fbf4' }
                    },
                    {
                        value: 25, name: '逾期 25', labelLine: {
                            show: true,
                            length: 10, // 引导线的长度
                            length2: 10, // 引导线的末端长度
                            lineStyle: {
                                width: 1 // 引导线的宽度
                            }
                        },
                        itemStyle: { color: '#f4c311' }
                    },
                    {
                        value: 25, name: '续借 25%', labelLine: {
                            show: true,
                            length: 10, // 引导线的长度
                            length2: 10, // 引导线的末端长度
                            lineStyle: {
                                width: 1 // 引导线的宽度
                            }
                        },
                        itemStyle: { color: '#24cbff' }
                    },

                ],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 6, // 设置字体大小
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'white', // 线的颜色
                        borderWidth: 0        // 设置线宽为0，即不显示线
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        myChart.resize();
    });
})();